<template>
  <!-- 文本分段 -->
  <div class="textMore-box" v-if="props.data">
    <!-- <div class="Span" ref="Span"></div>
    <div class="DomHeight" :ref="`DomHeight`" v-html="props.data"></div> -->
    <div class="text-mode-eil">
      <van-text-ellipsis
        @click="lookEllipsis"
        :rows="props.row"
        :content="filterHTML(props.data)"
        @click-action="lookAll"
        expand-text="全文"
        collapse-text="全文"
        ref="vant"
      />
      <!-- <div class="text-mode-eil-flot">
        <span @click="lookAll">全文</span>
      </div> -->
    </div>
    <!-- <div class="warp" v-if="!isBtn">
      <div class="expansion">
        <div class="text" ref="Text" v-html="props.data"></div>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import { useProjectStore } from '@/store';
import { filterHTML, getTextHtml } from '@/utils/minxin';
import { defineComponent, ref, onMounted, watch, nextTick, onUnmounted, onDeactivated } from 'vue';
export default defineComponent({
  name: 'TextMax',
});
</script>

<script lang="ts" setup>
const Span = ref();
const isExpansion = ref(true);
const Text = ref();
const DomHeight = ref();
const isBtn = ref(true);
const store = useProjectStore();
const textStr = ref('');
const vant = ref(null);
const timer = ref(null);
const widthLoop = ref(true); //刷新状态
const props = defineProps({
  title: {
    type: String, // 标题
    default: '',
  },
  data: {
    type: String, //分段的文本内容
    default: '',
  },
  infoData: {
    type: Object, // 父组件全部数据
  },
  btnColor: {
    type: String, // 按钮颜色
    default: '#fff',
  },
  row: {
    type: Number, // 展示行数
    default: 3,
  },
  textData: {
    type: String, //不分段的文本内容
    default: '',
  },
  backgroundColor1: {
    type: String, // 文本渐隐背景色
    default: '#fff',
  },
  backgroundColor2: {
    type: String, // 文本渐隐背景色
    default: '#fff',
  },
  id: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['Top']);
watch(
  () => isExpansion.value,
  () => {
    if (isExpansion.value) return;
  },
);
const lookEllipsis = () => {
  const isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
  );
  if (isMobile) {
    store.setRemark(props.data, props.title, props.infoData?.subTitle);
    store.setChildRemarksShow(true);
  }
};
watch(
  () => props.data,
  () => {
    widthLoop.value = false;
    nextTick(() => {
      widthLoop.value = true;
    });
    isExpansion.value = true;
  },
);
// const UpCallback = () => {
//   isExpansion.value = true;

//   Span.value.scrollIntoView();
//   try {
//   } catch {
//     console.log('未传置顶事件');
//   }
// };

onUnmounted(() => {
  clearInterval(timer.value);
});

timer.value = setInterval(() => {
  //判断虚拟文本dom是否高于容器dom
  if (!props.data || !DomHeight.value) {
    isBtn.value = false;
    return;
  }
  if (DomHeight.value && DomHeight.value?.offsetHeight > 32 * props.row) {
    // console.log(DomHeight.value.offsetHeight, 32 * props.row);

    isBtn.value = true;
    clearInterval(timer.value);
  } else {
    isBtn.value = false;
  }
}, 550);
// const gettext = computed(() => {
//   textStr.value = filterHTML(props.data);
// });
onDeactivated(() => {
  clearInterval(timer.value);
});
const mousewheelStop = (event: any) => {
  // event.preventDefault(); // 阻止事件的默认行为
};
onMounted(() => {
  // 监听内容动态切换，重新判断高度
  watch( 
    () => props.data,
    () => { 
      // textStr.value = filterHTML(props.data);
      isBtn.value = true; 
      clearInterval(timer.value);
      timer.value = setInterval(() => {
        if (!props.data) {
          isBtn.value = false;
          return;
        }
        //判断虚拟文本dom是否高于容器dom
        if (DomHeight.value.offsetHeight > 32 * props.row) {
          isBtn.value = true;
          clearInterval(timer.value);
        } else {
          isBtn.value = false;
        }
      }, 550);
    },
  );
});

const lookAll = () => {
  vant.value.toggle(false);
  store.setRemark(props.data, props.title, props.infoData?.subTitle);
  store.setChildRemarksShow(true);
};
</script>

<style lang="less" scoped>
.textMore-box {
  position: relative;
  width: 100%;
}
.text-mode-eil {
  width: 100%;
  position: relative;
  :deep(.van-text-ellipsis) {
    color: #333;
    text-align: justify;
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%; /* 32px */
    text-indent: 32px;
  }
  :deep(.van-text-ellipsis__action) {
    color: #8a7a6a;
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 34px; /* 212.5% */
  }
}
:deep(.van-text-ellipsis__action) {
  color: rgba(0, 0, 0, 0) !important;
}
:deep(.van-text-ellipsis__action::before) {
  position: absolute;
  bottom: 0;
  right: 0;
  content: '全文';
  color: #8a7a6a !important;
  font-family: 'PingFang SC';
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 34px; /* 212.5% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
  // position: absolute !important;
  // bottom: 0 !important;
  right: 0 !important;
}
</style>
